<template>
  <div>
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '查看',
                onClick: handleView.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <OperationLogModal @register="registerModal"
  /></div>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useModal } from '/@/components/Modal';
  import OperationLogModal from './OperationLogModal.vue';

  import { columns, searchFormSchema } from './operationLog.data';

  export default defineComponent({
    name: 'OperationLogManagement',
    components: { BasicTable, TableAction, OperationLogModal },
    setup() {
      const isAllocation = ref(false);

      const [registerModal, { openModal }] = useModal();

      const { createMessage } = useMessage();

      const [registerTable, { reload }] = useTable({
        api: () =>
          Promise.resolve([
            {
              postName: '123651235',
              deptName: '登录',
              time: '2023-01-2816:42:14',
              url: 'http://127.0.0.1:32768/start.html#id=0b7hy8&p',
              des: 'type_1',
              ip: '222.222.222.222',
              result: '成功',
            },
          ]),
        columns,
        formConfig: {
          labelWidth: 80,
          schemas: searchFormSchema,
        },
        useSearchForm: true,
        showTableSetting: false,
        bordered: true,
        // showIndexColumn: false,
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          // slots: { customRender: 'action' },
          fixed: undefined,
        },
        indexColumnProps: {
          width: 100,
          align: 'left',
        },
      });

      function handleView(record) {
        console.log('record', record);
        // openModal(true, {
        //   record,
        //   isUpdate: true,
        // });
      }

      function handleAllocation() {
        isAllocation.value = true;
        nextTick(() => {
          (document.querySelector('.set-page') as HTMLElement).style.height =
            (document.querySelector('.vben-layout-content') as HTMLElement).offsetHeight + 'px';
        });
      }

      function handleSelect() {}

      function handleCreate() {
        openModal(true, {
          isUpdate: false,
        });
      }

      function handleEdit(record: Recordable) {
        openModal(true, {
          record,
          isUpdate: true,
        });
      }

      async function handleDelete(record: Recordable) {
        console.log(record);
        createMessage.success('操作成功');
        reload();
      }

      function handleSuccess() {
        reload();
      }
      function handleImport() {
        createMessage.success('操作成功');
        reload();
      }

      return {
        isAllocation,
        handleAllocation,
        handleSelect,
        registerTable,
        registerModal,
        handleCreate,
        handleEdit,
        handleDelete,
        handleSuccess,
        handleImport,
        handleView,
      };
    },
  });
</script>

<style scoped lang="less">
  :deep(.vben-basic-table .ant-table-wrapper) {
    padding-left: 16px;
    padding-top: 16px;
  }
</style>
